<template>
  <div>
    <h1>Home</h1>
    <div>
      <!-- router-link 的字符串写法 -->
      <!-- <router-link to="/home/news">news</router-link>
      <router-link to="/home/music">music</router-link> -->

      <!-- router-link的对象写法,对象中书写path属性设置路由地址  ,to前面必须加冒号   -->
      <!-- <router-link :to="{path:'/home/news'}">news</router-link>
      <router-link :to="{path:'/home/music'}">music</router-link> -->

      <!-- router-link的对象写法,对象中通过路由的name属性来设置路由地址 -->
      <router-link :to="{name:'news'}">news</router-link>
      <router-link :to="{name:'music'}">music</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  beforeCreate() {
    console.log("----beforeCreate----");
  },
  created() {
    console.log("----created----");
  },
  beforeMount() {
    console.log("----beforeMount----");
  },
  mounted() {
    console.log("----mounted----");
  },
  beforeDestroy() {
    console.log("----beforeDestroy----");
  },
  destroyed() {
    console.log("----destroyed----");
  },
};
</script>

<style>
</style>